<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="header-content">
        <view class="header-left">
          <view class="back-btn" @tap="goBack">
            <text class="back-icon">←</text>
          </view>
          <text class="header-title">收银台</text>
        </view>
      </view>
    </view>

    <scroll-view class="content-scroll" scroll-y="true">
      <!-- 订单信息 -->
      <view class="order-info">
        <view class="order-header">
          <text class="order-title">订单信息</text>
          <text class="order-status">待支付</text>
        </view>
        <view class="order-details">
          <view class="detail-row">
            <text class="detail-label">订单号</text>
            <text class="detail-value">{{ orderId }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">创建时间</text>
            <text class="detail-value">{{ createTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">支付金额</text>
            <text class="detail-value amount">¥{{ payAmount }}</text>
          </view>
        </view>
      </view>

      <!-- 支付方式 -->
      <view class="payment-methods">
        <view class="section-title">
          <text class="title-text">选择支付方式</text>
        </view>
        
        <view class="method-list">
          <view 
            v-for="method in paymentMethods" 
            :key="method.id"
            class="method-item"
            :class="{ active: selectedMethod === method.id }"
            @tap="selectMethod(method.id)"
          >
            <view class="method-left">
              <text class="method-icon">{{ method.icon }}</text>
              <view class="method-info">
                <text class="method-name">{{ method.name }}</text>
                <text class="method-desc">{{ method.desc }}</text>
              </view>
            </view>
            <view class="method-radio">
              <view class="radio-dot" :class="{ checked: selectedMethod === method.id }"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 优惠信息 -->
      <view class="discount-info">
        <view class="discount-item">
          <text class="discount-icon">🎫</text>
          <text class="discount-text">已优惠 ¥{{ discountAmount }}</text>
        </view>
      </view>

      <!-- 安全提示 -->
      <view class="security-tips">
        <view class="tips-header">
          <text class="tips-icon">🔒</text>
          <text class="tips-title">安全保障</text>
        </view>
        <view class="tips-list">
          <text class="tip-item">• 支付过程采用银行级加密技术</text>
          <text class="tip-item">• 资金由第三方支付平台保障</text>
          <text class="tip-item">• 支持7天无理由退款</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部支付栏 -->
    <view class="bottom-payment">
      <view class="payment-info">
        <text class="payment-label">需支付：</text>
        <text class="payment-amount">¥{{ payAmount }}</text>
      </view>
      <view class="payment-btn" @tap="confirmPayment">
        <text class="btn-text">确认支付</text>
      </view>
    </view>

    <!-- 支付中弹窗 -->
    <view v-if="showPayingModal" class="paying-modal-overlay">
      <view class="paying-modal-content">
        <view class="paying-icon">
          <text class="loading-icon">⏳</text>
        </view>
        <text class="paying-text">支付处理中...</text>
        <text class="paying-desc">请勿关闭页面</text>
      </view>
    </view>

    <!-- 支付结果弹窗 -->
    <view v-if="showResultModal" class="result-modal-overlay">
      <view class="result-modal-content">
        <view class="result-icon">
          <text class="success-icon" v-if="paymentSuccess">✅</text>
          <text class="fail-icon" v-else>❌</text>
        </view>
        <text class="result-title">{{ paymentSuccess ? '支付成功' : '支付失败' }}</text>
        <text class="result-desc">{{ paymentSuccess ? '订单已提交，请耐心等待发货' : '支付过程中出现问题，请重试' }}</text>
        
        <view class="result-buttons">
          <view v-if="!paymentSuccess" class="result-btn retry-btn" @tap="retryPayment">
            <text class="btn-text">重新支付</text>
          </view>
          <view class="result-btn confirm-btn" @tap="handlePaymentResult">
            <text class="btn-text">{{ paymentSuccess ? '查看订单' : '确定' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      orderId: '',
      payAmount: 0,
      discountAmount: 0,
      createTime: '',
      selectedMethod: 1,
      showPayingModal: false,
      showResultModal: false,
      paymentSuccess: false,
      paymentMethods: [
        {
          id: 1,
          name: '微信支付',
          desc: '推荐使用微信支付',
          icon: '💚'
        },
        {
          id: 2,
          name: '支付宝',
          desc: '支持花呗分期付款',
          icon: '💙'
        },
        {
          id: 3,
          name: '银行卡支付',
          desc: '支持各大银行储蓄卡',
          icon: '💳'
        },
        {
          id: 4,
          name: '余额支付',
          desc: '当前余额：¥0.00',
          icon: '💰'
        }
      ]
    }
  },

  onLoad(options) {
    // 接收订单信息
    this.orderId = options.orderId || 'ORDER' + Date.now()
    this.payAmount = parseFloat(options.amount) || 0
    this.discountAmount = parseFloat(options.discount) || 0
    
    // 设置创建时间
    const now = new Date()
    this.createTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
    
    console.log('支付页面参数:', options)
  },

  methods: {
    // 返回上一页
    goBack() {
      uni.showModal({
        title: '确认返回',
        content: '返回将取消当前支付，确定要返回吗？',
        confirmText: '确定',
        cancelText: '继续支付',
        success: (res) => {
          if (res.confirm) {
            uni.navigateBack()
          }
        }
      })
    },

    // 选择支付方式
    selectMethod(methodId) {
      this.selectedMethod = methodId
      const method = this.paymentMethods.find(m => m.id === methodId)
      
      // 检查余额支付
      if (methodId === 4) {
        uni.showToast({
          title: '余额不足',
          icon: 'none',
          duration: 1500
        })
        return
      }
      
      uni.showToast({
        title: `已选择${method.name}`,
        icon: 'none',
        duration: 1000
      })
    },

    // 确认支付
    confirmPayment() {
      if (!this.selectedMethod) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        })
        return
      }

      const method = this.paymentMethods.find(m => m.id === this.selectedMethod)
      
      // 检查余额支付
      if (this.selectedMethod === 4) {
        uni.showToast({
          title: '余额不足，请选择其他支付方式',
          icon: 'none'
        })
        return
      }

      // 显示支付中弹窗
      this.showPayingModal = true

      // 模拟支付过程
      setTimeout(() => {
        this.showPayingModal = false
        
        // 随机决定支付结果（80%成功率）
        this.paymentSuccess = Math.random() > 0.2
        this.showResultModal = true
      }, 3000)
    },

    // 重新支付
    retryPayment() {
      this.showResultModal = false
      this.confirmPayment()
    },

    // 处理支付结果
    handlePaymentResult() {
      this.showResultModal = false
      
      if (this.paymentSuccess) {
        // 支付成功，跳转到订单详情或首页
        uni.showToast({
          title: '跳转到订单详情',
          icon: 'success',
          duration: 1500
        })
        
        setTimeout(() => {
          // 这里可以跳转到订单详情页面
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
      } else {
        // 支付失败，可以重新选择支付方式
        console.log('支付失败，用户可以重新尝试')
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 160rpx;
}

/* 顶部导航 */
.header {
  background-color: white;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.back-btn {
  padding: 8rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 内容滚动区域 */
.content-scroll {
  height: calc(100vh - 240rpx);
}

/* 订单信息 */
.order-info {
  margin: 20rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.order-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.order-status {
  font-size: 24rpx;
  color: #ff9500;
  background-color: rgba(255, 149, 0, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 12rpx;
}

.order-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-label {
  font-size: 26rpx;
  color: #666;
}

.detail-value {
  font-size: 26rpx;
  color: #333;
}

.detail-value.amount {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4757;
}

/* 支付方式 */
.payment-methods {
  margin: 20rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.section-title {
  margin-bottom: 24rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.method-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  border-radius: 16rpx;
  border: 2rpx solid #f0f0f0;
  transition: all 0.3s ease;
}

.method-item.active {
  border-color: #388f4a;
  background-color: rgba(56, 143, 74, 0.05);
}

.method-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.method-icon {
  font-size: 40rpx;
}

.method-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.method-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.method-desc {
  font-size: 24rpx;
  color: #999;
}

.method-radio {
  width: 40rpx;
  height: 40rpx;
  border: 3rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.method-item.active .method-radio {
  border-color: #388f4a;
}

.radio-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s ease;
}

.radio-dot.checked {
  background-color: #388f4a;
}

/* 优惠信息 */
.discount-info {
  margin: 20rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.discount-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.discount-icon {
  font-size: 32rpx;
}

.discount-text {
  font-size: 26rpx;
  color: #ff4757;
  font-weight: 500;
}

/* 安全提示 */
.security-tips {
  margin: 20rpx 30rpx;
  background-color: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.tips-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 20rpx;
}

.tips-icon {
  font-size: 28rpx;
}

.tips-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.tip-item {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

/* 底部支付栏 */
.bottom-payment {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1rpx solid #e0e0e0;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.payment-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.payment-label {
  font-size: 28rpx;
  color: #666;
}

.payment-amount {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4757;
}

.payment-btn {
  background: linear-gradient(45deg, #388f4a, #4caf50);
  color: white;
  padding: 24rpx 60rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 20rpx rgba(56, 143, 74, 0.3);
  transition: all 0.3s ease;
}

.payment-btn:active {
  transform: scale(0.95);
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: white;
}

/* 支付中弹窗 */
.paying-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.paying-modal-content {
  background-color: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  min-width: 300rpx;
}

.paying-icon {
  animation: rotate 2s linear infinite;
}

.loading-icon {
  font-size: 60rpx;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.paying-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.paying-desc {
  font-size: 24rpx;
  color: #999;
}

/* 支付结果弹窗 */
.result-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.result-modal-content {
  background-color: white;
  border-radius: 20rpx;
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
  min-width: 400rpx;
}

.result-icon {
  margin-bottom: 20rpx;
}

.success-icon,
.fail-icon {
  font-size: 80rpx;
}

.result-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.result-desc {
  font-size: 26rpx;
  color: #666;
  text-align: center;
  line-height: 1.5;
}

.result-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
}

.result-btn {
  padding: 24rpx 40rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.retry-btn {
  background-color: #f8f9fa;
  border: 1rpx solid #e9ecef;
}

.retry-btn .btn-text {
  color: #666;
}

.confirm-btn {
  background: linear-gradient(45deg, #388f4a, #4caf50);
}

.confirm-btn .btn-text {
  color: white;
}

.result-btn:active {
  transform: scale(0.95);
}
</style>
